<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title data-i18n="extension_name">為什麼你們就是不能加個空格呢？</title>
    <link rel="stylesheet" href="../stylesheets/styles.css" />
    <link rel="stylesheet" href="../stylesheets/popup.css" />
    <script type="module" src="../dist/popup.js"></script>
  </head>
  <body>
    <div class="popup-container">
      <!-- Notification area -->
      <div id="notification" class="notification" style="display: none">
        <span id="notification-message"></span>
      </div>

      <!-- Header -->
      <div class="popup-header">
        <div class="popup-brand">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 100 100" class="popup-logo" aria-label="pangu.js">
            <g>
              <path d="M31.999,59.971c-0.356,1.319-0.558,2.823-0.558,4.421c0,2.959,0.69,5.6,1.771,7.338c2.34,1.392,4.307,4.215,5.565,7.881   c2.568-2.233,7.076-2.299,8.312-2.299h2.938h2.939c1.235,0,5.742,0.065,8.312,2.299c1.258-3.666,3.225-6.489,5.564-7.881   c1.08-1.738,1.771-4.379,1.771-7.338c0-1.598-0.201-3.102-0.56-4.421l-0.008-0.027c-0.326-1.338-0.523-2.808-0.523-4.453   c0-1.507,0.155-2.929,0.427-4.186c0.094-0.408,0.149-0.822,0.149-1.262c0-2.861-2.157-5.181-4.818-5.181   c-1.38,0-2.617,0.625-3.51,1.634l-0.124,0.146c-2.258,2.642-5.694,4.328-9.547,4.328h-0.075h-0.076   c-3.851,0-7.288-1.687-9.547-4.328l-0.123-0.146c-0.892-1.009-2.13-1.634-3.511-1.634c-2.66,0-4.817,2.319-4.817,5.181   c0,0.36,0.037,0.703,0.103,1.038c0.306,1.311,0.479,2.812,0.479,4.409c0,1.646-0.197,3.115-0.523,4.453L31.999,59.971   L31.999,59.971z M50.027,81.697l-0.146-0.001c0,0-1.831,0.005-5.327,0.245c-3.493,0.24-2.991,4.707-2.493,6.682   c0.383,1.511,1.678,3.045,3.059,3.316c2.802,0.37,3.848-0.984,3.848-2.599c0-1.058,0.135-1.687-1.684-2.665   c-0.687-0.358-1.132-0.938-1.089-1.834c1.177,0.196,2.463,0.304,3.808,0.304h0.024h0.024c1.346,0,2.631-0.107,3.809-0.304   c0.044,0.896-0.402,1.476-1.09,1.834c-1.817,0.979-1.682,1.607-1.682,2.665c0,1.614,1.045,2.969,3.847,2.599   c1.381-0.271,2.677-1.806,3.058-3.316c0.499-1.975,1.002-6.441-2.493-6.682c-3.494-0.24-5.327-0.245-5.327-0.245L50.027,81.697   L50.027,81.697z M27.806,57.569c-1.035,1.629-1.456,3.95-0.994,6.438c0.603,3.244,2.537,5.877,4.816,6.918L27.806,57.569   L27.806,57.569z M68.478,70.754c2.126-1.14,3.898-3.667,4.468-6.746c0.433-2.32,0.095-4.496-0.793-6.1L68.478,70.754L68.478,70.754   z M3.068,38.634C3.068,17.527,24.08,0.417,50,0.417c25.919,0,46.931,17.11,46.931,38.217c0,16.064-12.171,29.812-29.411,35.467   l-0.75,2.62c-1.64,6.162-2.461,11.838-3.714,14.512c-1.032,4.364-6.436,8.069-12.889,8.069l-0.14-0.001l-0.139,0.001   c-6.455,0-11.856-3.705-12.89-8.069c-1.252-2.674-2.073-8.35-3.713-14.512l-0.744-2.6C15.268,68.48,3.068,54.718,3.068,38.634   L3.068,38.634z M37.108,63.135c0.499-0.494,1.988-1.79,4.125-2.088c2.394-0.333,3.649,1.688,3.873,2.088H37.108L37.108,63.135z    M35.153,59.545c1.141-1.392,3.199-2.401,5.605-2.57c1.942-0.136,3.735,0.303,5.052,1.119l1.409,3.586   c-1.683-1.59-4.551-2.709-7.667-2.803C37.894,58.826,36.388,59.076,35.153,59.545L35.153,59.545z M64.604,59.545   c-1.234-0.469-2.739-0.719-4.398-0.668c-3.116,0.094-5.984,1.213-7.668,2.803l1.409-3.586c1.316-0.816,3.11-1.255,5.053-1.119   C61.405,57.144,63.464,58.153,64.604,59.545L64.604,59.545z M62.649,63.135h-7.997c0.222-0.4,1.479-2.421,3.872-2.088   C60.662,61.345,62.15,62.641,62.649,63.135L62.649,63.135z"></path>
            </g>
          </svg>
          <div>
            <h1 class="popup-title" data-i18n="extension_name">為什麼你們就是不能加個空格呢？</h1>
            <p class="popup-subtitle" data-i18n="popup_subtitle">讓空格之神赦免他們不加空格的罪</p>
          </div>
        </div>
      </div>

      <!-- Content -->
      <div class="popup-content">
        <!-- Spacing mode toggle -->
        <div class="popup-section">
          <label class="toggle">
            <input type="checkbox" class="toggle-input" id="spacing-mode-toggle" />
            <span class="toggle-switch"></span>
            <span class="toggle-label" data-i18n="spacing_when_load">網頁載入後自動召喚空格之神</span>
          </label>
        </div>

        <!-- Mute toggle -->
        <div class="popup-section">
          <label class="toggle">
            <input type="checkbox" class="toggle-input" id="mute-toggle" />
            <span class="toggle-switch"></span>
            <span class="toggle-label" data-i18n="label_is_mute_sound_effects">太吵了，靜音</span>
          </label>
        </div>

        <!-- Status indicator -->
        <div class="popup-section">
          <label class="toggle toggle-secondary" id="status-indicator">
            <input type="checkbox" class="toggle-input" id="status-toggle-input" disabled />
            <span class="toggle-switch"></span>
            <span class="toggle-label" id="status-toggle-label" data-i18n="status_inactive">空格之神神隱中</span>
          </label>
        </div>

        <!-- Manual spacing button -->
        <div class="popup-section mt-4">
          <button class="btn btn-primary-black btn-block" id="manual-spacing-btn" data-i18n="manual_spacing">召喚空格之神</button>
        </div>

        <!-- Add to blacklist button -->
        <div class="popup-section">
          <button class="btn btn-primary-black btn-block" id="add-to-blacklist-btn" data-i18n="add_to_blacklist">把這個網址加到黑名單</button>
        </div>
      </div>

      <!-- Footer -->
      <div class="popup-footer">
        <div class="popup-footer-links">
          <a href="options.html" target="_blank" class="popup-footer-link" data-i18n="settings">設定</a>
          <a href="https://chrome.google.com/webstore/detail/paphcfdffjnbcgkokihcdjliihicmbpd/reviews" target="_blank" class="popup-footer-link" data-i18n="extension_rate">評分</a>
          <a href="https://github.com/vinta/pangu.js" target="_blank" class="popup-footer-link">GitHub</a>
        </div>
        <span>v<span id="version">x.y.z</span></span>
      </div>
    </div>
  </body>
</html>
